<template>
  <div class="learnIndex">
    <div class="container" ref="container">
      <Loading  v-if="notMore"  class="empty-text-wrap" />
      <mu-load-more @load="load" :loading="loading">
        <div class="top">

          <div class="header">
            <div class="header-search flex-1" @click="toSearch">
              <i  class="iconfont iconxuanchuan_icon_sousuo"></i>
              <span> 请搜索相关新闻/视频/音频</span>
            </div>
            <!--<h3 class="title">{{org_name}}</h3>-->
            <div class="header-notice">
              <!--<i @click="toSearch" class="iconfont iconxuanchuan_icon_sousuo"></i>-->
              <i @click="toInformation" class="iconfont iconxuanchuan_icon_xiaoxi"></i>
            </div>
          </div>
        </div>

        <!--<div class="banner">-->
          <!--<div class="swiper-container">-->
            <!--<div class="swiper-wrapper">-->
              <!--<div class="swiper-slide">-->
                <!--<img src="@as/img/xuexi_shouye_ban01@2x.png" alt>-->
              <!--</div>-->
              <!--<div class="swiper-slide">-->
                <!--<img src="@as/img/xuexi_shouye_ban01@2x.png" alt>-->
              <!--</div>-->
              <!--<div class="swiper-slide">-->
                <!--<img src="@as/img/xuexi_shouye_ban01@2x.png" alt>-->
              <!--</div>-->
            <!--</div>-->

            <!--<div class="swiper-pagination"></div>-->
          <!--</div>-->
        <!--</div>-->
        <div class="everyLearn">
          <h4 class="title">学习计划</h4>
          <p>每天10分钟学习 党建学习日常化</p>
          <div class="btn" @click="studyPlan()">
            去学习
            <i style="font-size:8px;" class="iconfont iconxuexi_icon_sanjiao"></i>
          </div>
        </div>

        <div class="topic">
          <div @click="videoLearning()">
            <img src="@as/img/study-icon-1.png" alt>
            <span>视频资料</span>
          </div>
          <div @click="audioLearning()">
            <img src="@as/img/study-icon-2.png" alt>
            <span>音频资料</span>
          </div>
          <div @click="learningTopics()">
            <img src="@as/img/study-icon-3.png" alt>
            <span>专题学习</span>
          </div>
          <div @click="learnData()">
            <img src="@as/img/study-icon-4.png" alt>
            <span>学习数据</span>
          </div>
          <div @click="badge()">
            <img src="@as/img/study-icon-5.png" alt>
            <span>我的徽章</span>
          </div>
        </div>



        <div class="card">
          <div class="left" @click="onlineExam()">
            <h5 class="title">学习考试</h5>
            <p>考核常态化</p>
            <p>巩固学习成效</p>
          </div>
          <div class="right">
            <div @click="note()" class="r1">
              <h5 class="title">学习笔记</h5>
              <p>党建学习交流中心</p>
            </div>
            <div @click="ranking()" class="r2">
              <h5 class="title">学习排行榜</h5>
              <p>创先争优</p>
            </div>
          </div>
        </div>

        <div class="hot">
          <h3 class="title">热门课程
            <!--<span>查看更多</span>-->
          </h3>
          <div class="box" v-for="item of listData" :key="item.id" @click="video(item)">
            <div class="img">
              <img :src="item.photo" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca'">
              <div v-if="item.state=='1'">视频</div>
              <div v-if="item.state=='2'">音频</div>
              <div v-if="item.state=='3'">专辑</div>
            </div>
            <div class="dec flex-1">
              <p>{{item.title}}</p>
              <div>
                <p>
                  <i class="iconfont iconxuanchuan_icon_kanguo" style="color:#ccc;font-size:14px;"></i>
                  <span>{{item.people_num}}人看过</span>
                </p>
                <p>
                  <i class="iconfont iconxuexi_icon_shijian" style="color:#ccc;font-size:14px;"></i>
                  <span v-if="item.state == '3'">{{item.num | conversionToMinute}}</span>
                  <span v-if="item.state != '3'">共{{item.num}}节</span>
                </p>
              </div>
            </div>


          </div>
        </div>
        <!--<div class="loading" v-if="loading">{{loaded}}</div>-->
        <div class="loading" v-if="loadOver&&p!=1">{{loaded}}</div>
        <!--<p class="bottom-tips">-->
          <!--七一云党建 专业互联网+智慧云党建平台-->
        <!--</p>-->
      </mu-load-more>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import Loading from '@/components/emptyText.vue';
export default {
  data() {
    return {
      listData: [],
      org_name:'',
      num: 10,
      p: 1,
      loading: false,
      loaded: "加载更多...",
      method: "",
      notMore: false,
      loadOver:false
    };
  },
    components:{
        Loading
    },
  mounted() {
    this.initData(this.p);
    this.$progress.done();
      this.org_name =JSON.parse(Cookies.get('user_71ydj')).organization
    new Swiper(".swiper-container", {
      loop: true,
      pagination: {
        el: ".swiper-pagination"
      }
    });
  },
  methods: {
      toInformation() {
         this.$router.push('/propaganda/details/information')
      },
      toSearch() {
         this.$router.push({path: "/propaganda/details/search"})
      },
    initData(p) {
      this.$http
        .get("applets/index/hot_list", {
          p: p,
          page:5,
          org_id: JSON.parse(Cookies.get('user_71ydj')).organization_id
        })
        .then(res => {
            if(res.data.length){
                res.data.forEach((e,index) => {
                   e.index = index
                });
                this.listData.push(...res.data);
                // this.loveList.push(...res.data);
            }
            this.loadOver =false;
            if(p!=1){
                console.log(res.data);
                if(res.data.length){
                }else{
                    this.loadOver =true;
                    this.loading =false;
                    this.loaded='没有更多数据了'
                    return false
                }
            }else {
                if(!res.data.length){
                    this.notMore =true;
                    this.loadOver =false;
                }else{
                    if(res.data.length<5&&res.data.length!=0){
                        this.loadOver =true;
                        this.loaded='没有更多数据了';
                        this.notMore =false;
                    }
                }
            }
          // if (res.data.length == 0) {
          //   this.loaded = "没有更多";
          //   this.loading = true;
          //   this.notMore = false;
          //   return;
          // }
          // res.data.forEach((e,index) => {
          //    e.index = index
          // });
          // this.listData.push(...res.data);
          // this.loading = false;
        });
    },

    load() {
        if (!this.loadOver) {
            this.loading = true;
            clearTimeout(this.method);
            this.method = setTimeout(() => {
                this.p = this.p + 1;
                this.initData(this.p);
                this.loading =false;
            }, 1500);
        }
      //
      // this.loading = true;
      // if (this.notMore) {
      //   clearTimeout(this.method);
      //   this.method = setTimeout(() => {
      //     this.p = this.p + 1;
      //     this.initData(this.p);
      //   }, 500);
      // }
    },

    videoLearning() {
      this.$router.push({ path: "/learn/videoLearning", query: {} });
    },

    learningTopics() {
      this.$router.push({ path: "/learn/learningTopics", query: {} });
    },

    audioLearning() {
      this.$router.push({ path: "/learn/audioLearning", query: {} });
    },
    note() {
      this.$router.push({ path: "/learn/note", query: {} });
    },
    ranking() {
      this.$router.push({ path: "/learn/ranking", query: {} });
    },

    studyPlan() {
      this.$router.push({ path: "/learn/studyPlan", query: {} });
    },

    badge() {
      this.$router.push({ path: "/learn/badge", query: {} });
    },
    onlineExam() {
      this.$router.push({ path: "/learn/onlineExam", query: {} });
    },
    learnData(){
      this.$router.push({path:'/learn/learnData'})
    },
      msg(){
      this.$router.push({path:'propaganda/details/information'})
    },
      seach(){
      this.$router.push({path:'/propaganda/details/search'})
    },
    video(item) {
      if (item.state == 1) {
        this.$router.push({
          path: "/learn/videoInfo",
          query: { id: item.id, type: item.type }
        });
        return;
      }
      if (item.state == 2) {
        this.$router.push({
          path: "/learn/audioInfo",
          query: { id: item.id, type: item.type }
        });
        return;
      }

      if (item.state == 3) {
        this.$router.push({
          path: "/learn/specialInfo",
          query: { id: item.id, type: item.type }
        });
        return;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  .empty-text-wrap{
    width: 100%;
    height: 100%;
  }
  .learnIndex{
    /*overflow-y: scroll;*/
    webkit-overflow-scrolling: touch;
    /*&::-webkit-scrollbar {display: none;}*/
  }
.demo-loadmore-wrap {
  width: 100%;
  max-width: 360px;
  height: 420px;
  display: flex;
  flex-direction: column;
  .mu-appbar {
    width: 100%;
  }
}
.demo-loadmore-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.header-search{
  height: 36px;
  line-height: 36px;
  background:rgba(246,246,246,1);
  border-radius:18px;
  padding-left: 10px;
  .iconfont:before{
    color:rgba(153,153,153,1);
    font-size: 10px;
  }
  span{
    font-size:13px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
}
.title {
  color: #333;
  margin: 0 !important;
  font-size: 19px;
  font-weight: bold;
  font-size: 19px;
  font-weight: bold;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.swiper-container {
  width: 100%;
  height: 142px;
  img {
    width: 100%;
    height: 100%;
  }
}

/deep/.swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.3);
}

/deep/.swiper-pagination-bullet-active {
  background: #fff;
}
.container {
  width: 343px;
  height: auto;
  margin-bottom: 60px;
  padding: 0;
}

.top {
  margin: 0;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .title {
    margin: 0 !important;

  }
  .header {
    height: 36px;
    width: 100%;
    /*width: 359px;*/
    /*padding: 15px 0 0 16px;*/
    display: flex;
    justify-content: space-between;
  }

  /*div {*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: space-between;*/
    /*img {*/
      /*width: 19px;*/
      /*height: 19px;*/
    /*}*/
  /*}*/
}

.banner {
  margin-top: 18px;
  box-shadow: 0px 15px 10px -15px #999;
  width: 100%;
  height: 142px;
}
.topic {
  width: 100%;
  margin-top: 37px;
  display: flex;
  justify-content: space-between;
  & > div {
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    img {
      width: 51px;
      height: 51px;
    }

    span {
      font-size: 11px;
      color:rgba(51,51,51,1);
      padding-top: 2px;
    }
  }

  * {
    font-size: 14px;
  }
}

.everyLearn {
  background: url("~@as/img/study-top.png") right top
    no-repeat;
  background-size: 232px 116px;
  margin: 17px 0 12px 0;
  .title {
    font-size: 26px;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
    padding-top: 15px;
  }

  & > p {
    font-size: 12px;
    color: #999;
  }

  .btn {
    width: 60px;
    height: 20px;
    margin-top: 17px;
    font-size: 10px;
    background:linear-gradient(76deg,rgba(242,104,82,1) 1%,rgba(247,138,104,1) 100%);
    color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
  }
}

.card {
  margin-top: 40px;
  width: 100%;
  height: 170px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  .title {
    margin: 0;
    font-size: 16px;
    color: #5585DA;
    margin-top: 8px;
    margin-left: 15px;
    font-weight: bold;
    margin-bottom: 9px;
    padding-top: 12px;
    padding-bottom: 3px;
    padding-left: 15px;

  }
  p {
    margin: 0;
    font-size: 11px;
    color: #999;
    margin-left: 15px;
    color:rgba(135,170,232,1);
  }
  .left {
    width: 150px;
    height: 170px;
    background: url("~@as/img/study-1.png") center center
      no-repeat;
    background-size: 100% 100%;
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 186px;
    height: 170px;
    .r1{
      .title{
        color: #44AE8E;
      }
      p{
        color: #59C2A1;
      }
    }
    .r2{
      .title{
        color: #ED8617;
      }
      p{
        color: #ED9D48;
      }
    }
    div {
      width: 186px;
      height: 82px;
      background: url("~@as/img/study-2.png") center center
        no-repeat;
      background-size: 100% 100%;
    }
    div + div {
      background: url("~@as/img/study-3.png") center center
        no-repeat;
      background-size: 100% 100%;
    }
  }
}

.box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  /*border-bottom: 1px solid #dddddd;*/
  padding-bottom: 22px;
  .dec {
    margin: 0;
    width: 197px;
    height: 97px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > p {
      font-size: 16px;
      width: 100%;
      color: #333;
      height: 50px;
      margin: 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    div {
      display: flex;
      justify-content: space-between;
      p {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999;
        margin: 0;
        span {
          margin-left: 3px;
        }
      }
    }
  }

  .img {
    position: relative;
    width: 130px;
    height: 97px;
    border-radius: 8px;
    margin-right: 15px;
    img {
      width: 130px;
      height: 97px;
      border-radius: 8px;
    }
    div {
      width:44px;
      height:18px;
      background:linear-gradient(80deg,rgba(226,54,53,1) 0%,rgba(229,100,74,1) 50%,rgba(236,141,93,1) 100%);
      border-radius:4px 0px 12px 0px;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      /*width: 44px;*/
      /*height: 20px;*/
      /*position: absolute;*/
      /*top: 0;*/
      /*right: 0;*/
      /*border-radius: 0 4px 0 4px;*/
      /*font-size: 12px;*/
      /*display: flex;*/
      /*justify-content: center;*/
      /*align-items: center;*/
      /*background: linear-gradient(to right, #eb4d44, #f47548);*/
      /*color: #fff;*/
    }
  }
}

.loading {
  width: 100%;
  font-size: 14px;
  color: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.header-notice{
  width: 20px;
  height: 20px;
  vertical-align:top;
  margin-left: 10px;
  margin-top: 5px;
  .iconfont:before{
    vertical-align: top;
    color: #333333;
    margin-top: 10px;
  }
}
.flex-1{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  height: 100%;
  font-size: 12px;
}
  .hot{
    margin-top: 40px;
    .title{
      padding-bottom: 25px;
      span{
        display: inline-block;
        float: right;
        color:rgba(153,153,153,1);
        font-size: 12px;
        vertical-align: bottom;
        margin-top: 4px;
      }
    }
  }
.bottom-tips{
  font-size:11px;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(205,203,198,1);
  padding-top: 16px;
  padding-bottom: 26px;
  text-align: center;
  background: #f5f4f1;
  margin: 0 -16px;
}
 .learnIndex .loading {
    width: 343px;
    margin: 0 16px ;
    font-size: 14px;
    color: #dddddd;
    clear: both;
    line-height: 61px;
    text-align: center;
    margin-top: -20px;
  }
  .learnIndex .mu-load-more /deep/ .mu-circle-spinner{
    border-color: #e5e5e5;
  }
</style>